<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span
          >条码示例：{{
            codingInf.codingExample ? codingInf.codingExample : "暂无条码示例"
          }}</span
        >F        <div style="float: right">
          <el-button
            v-permission="permission.edit"
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="crud.toEdit(codingInf)"
            :disabled="!codingInf.id"
          >
            编辑
          </el-button>
        </div>
        <!--表单组件-->
        <el-dialog
          :close-on-click-modal="false"
          :before-close="crud.cancelCU"
          :visible.sync="crud.status.cu > 0"
          :title="crud.status.title"
          width="500px"
        >
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="80px"
          >
            <el-form-item label="产品型号" prop="productCode">
              <el-select
                v-model="form.productCode"
                clearable
                filterable
                placeholder="产品型号"
                style="width: 380px"
                class="filter-item"
              >
                <el-option
                  v-for="item in productModel"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.productCode"
                >
                  <span style="float: left">{{ item.productName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.productCode
                  }}</span></el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="规则编码" prop="codingCode">
              <el-input v-model="form.codingCode" />
            </el-form-item>
            <el-form-item label="规则名称" prop="codingName">
              <el-input v-model="form.codingName" />
            </el-form-item>
            <!-- <el-form-item label="类型" prop="codingType">
            <el-input v-model="form.codingType" />
          </el-form-item> -->
            <el-form-item label="是否禁用" prop="isDisable">
              <el-radio-group v-model="form.isDisable">
                <el-radio
                  v-for="item in dict.is_disable"
                  :label="item.value"
                  :key="item.id"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="版本" prop="version">
              <el-input v-model="form.version" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.remark" :rows="3" type="textarea" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button
              :loading="crud.status.cu === 2"
              type="primary"
              @click="crud.submitCU"
              >确认</el-button
            >
          </div>
        </el-dialog>
      </div>
      <el-descriptions>
        <el-descriptions-item label="规则编码">{{
          codingInf.codingCode
        }}</el-descriptions-item>
        <el-descriptions-item label="规则名称">{{
          codingInf.codingName
        }}</el-descriptions-item>
        <el-descriptions-item label="产品型号">{{
          codingInf.productCode
        }}</el-descriptions-item>
        <el-descriptions-item label="是否禁用">
          <el-tag size="small">{{
            dict.label.is_disable[codingInf.isDisable]
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="版本">{{
          codingInf.version
        }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{
          codingInf.createBy
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          codingInf.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{
          codingInf.updateBy
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          codingInf.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{
          codingInf.remark
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card" style="margin-top: 15px">
      <div slot="header" class="clearfix">
        <span>规则列表</span>
      </div>
      <ruleDetail ref="rule" />
    </el-card>
  </div>
</template>

<script>
import crudProductCoding from "@/api/product/productCoding";
import crudProductModel from "@/api/product/productModel";
import ruleDetail from "./rule/index";
import CRUD, { presenter, form, crud } from "@crud/crud";
const defaultForm = {
  id: null,
  productCode: null,
  codingCode: null,
  codingName: null,
  codingType: null,
  codingExample: null,
  isDisable: null,
  version: null,
  remark: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
};
export default {
  name: "CodingDetail",
  components: { ruleDetail },
  mixins: [presenter(), form(defaultForm), crud()],
  dicts: ["is_disable"],
  cruds() {
    return CRUD({
      title: "编码规则",
      url: "api/productCoding",
      idField: "id",
      sort: "id,desc",
      queryOnPresenterCreated: false,
      crudMethod: { ...crudProductCoding },
    });
  },
  data() {
    return {
      codingInf: defaultForm,
      permission: {
        add: ["admin", "productCoding:add"],
        edit: ["admin", "productCoding:edit"],
        del: ["admin", "productCoding:del"],
      },
      rules: {
        productCode: [
          { required: true, message: "产品编码不能为空", trigger: "blur" },
        ],
        codingCode: [
          { required: true, message: "规则编码不能为空", trigger: "blur" },
        ],
        codingName: [
          { required: true, message: "规则名称不能为空", trigger: "blur" },
        ],
        // codingType: [
        //   { required: true, message: "类型不能为空", trigger: "blur" },
        // ],
        isDisable: [
          { required: true, message: "是否禁用不能为空", trigger: "blur" },
        ],
        version: [{ required: true, message: "版本不能为空", trigger: "blur" }],
      },
      productModel: [],
    };
  },
  methods: {
    // 详情刷新之后
    [CRUD.HOOK.afterRefresh]() {
      this.codingInf =
        this.crud.data.length > 0 ? this.crud.data[0] : defaultForm;
      return true;
    },
  },
  mounted() {
    const id = this.$route.params.id;
    this.$refs.rule.queryPage(id);
    this.crud.params.id = id;
    this.crud.toQuery();
    crudProductModel.list().then((data) => {
      this.productModel = data;
    });
  },
};
</script>

<style scoped>
</style>
